<template>
  <page-layout title="政策库">
    <a-card class="policy_card">
      <div class="policyPool_wrapper">
        <div class="top_div">
          <div style="width: 220px; flex-shrink: 0;margin-right: 20px;">
            <Vcity class="policyTab_cityTmp" before="上海" :citydata="cityData" mode="" @selectDepCityFn="selectDepCity" />
          </div>

          <div class="display_div">
            <a-descriptions title="">
              <a-descriptions-item v-for="(value, key, index) in descDataObj" :key="index" :label="key | keyFilter">
                {{value}}
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </div>

        <!-- <a-divider /> -->

        <div class="cnt_div">
          <a-tabs class="tab_cnt_wrapper" :default-active-key="1" tab-position="left" @change="tabOnChangeFn">
            <a-tab-pane v-for="(item, index) in tabDatasArr" :key="index + 1">
              <div slot="tab">
                <div class="tab_cnt" :class="activeKey == index + 1 ? 'active' : ''">
                  <img class="hide" :src="activeKey == index + 1 ? srcPath : srcPathActive" alt="">
                  <div class="txt_div">
                    <p v-if="item.name.indexOf('（') != -1">{{item.name.substring(0,item.name.indexOf('（'))}}</p>
                    <p v-else>{{item.name}}</p>
                    <p v-if="item.name.indexOf('（') != -1">{{item.name.substring(item.name.indexOf('（'), item.name.length) | symbolFilter}}</p>
                    <p>{{item.publishDate}} 至 现在</p>
                  </div>
                  <!-- <p v-if="item.type == 1" class="mini_label">社保</p>
                  <p v-else class="mini_label">公积金</p> -->
                  <img class="topLeft_img" :src="item.type == 1 ? require('@/assets/img/sb.png') : require('@/assets/img/gjj.png')" alt="">
                </div>
              </div>
              <div class="right_cnt">
                <p class="title">
                  <span>{{item.name}}</span>
                  <span>当前版本: {{item.publishDate}} 至 现在</span>
                </p>

                <a-descriptions title="" :column="3">
                  <a-descriptions-item v-for="(value, key) of rightCntDataObj" :key="key" :label="key | keyFilter">
                    <!-- <span v-if="key == 'websiteUrl'" v-html="websiteUrlFilter(value)"></span> -->
                    <!-- <span v-else>{{value}}</span> -->
                    <span class="popover_btn_span">
                      <a-popover title="">
                        <template slot="content">
                          <p v-html="valueFilterFn(value)"></p>
                        </template>
                        <span :class="value.length > 15 ? 'ellipsis' : ''">{{value.length > 15 ? htmlFilter(value.slice(0,14)) : htmlFilter(value)}}</span>
                      </a-popover>
                    </span>
                  </a-descriptions-item>
                </a-descriptions>

                <a-table :columns="rightCntColumns" :data-source="rightCntTableDataArr" :pagination="false" rowKey="id">
                  <template slot="baseBeginAmt" slot-scope="text, record">
                    <span v-if="record.baseBeginAmt && record.baseEndAmt">{{text}}-{{record.baseEndAmt}}</span>
                    <span v-else>固定金额</span>
                  </template>
                  <template slot="companyPercent" slot-scope="text, record">
                    <span v-if="record.companyAddAmt">{{text | toPercentFilter}}+{{record.companyAddAmt}}</span>
                    <span v-else-if="!record.baseBeginAmt && !record.baseEndAmt">{{record.fixedAmt}}</span>
                    <span v-else>{{text | toPercentFilter}}</span>
                  </template>
                  <template slot="personPercent" slot-scope="text, record">
                    <span v-if="record.personAddAmt">{{text | toPercentFilter}}+{{record.personAddAmt}}</span>
                    <span v-else>{{text | toPercentFilter}}</span>
                  </template>
                  <template slot="tracker" slot-scope="text">
                    <span>{{text | trackerFilter}}</span>
                  </template>
                </a-table>

                <table class="vertical_table table_div">
                  <tr v-for="(value, key, index) in tableDataObj" :key="index">
                    <th>{{key | tableThFilter}}</th>
                    <td>
                      <p v-for="(value, key, index) in valueToObj(value)" :key="index">
                        <span style="flex-shrink: 0;">{{key | tableTdkeyFilter}}</span>
                        <span v-html="valueFilterFn(value)"></span>
                      </p>
                    </td>
                  </tr>
                </table>
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>

      </div>
    </a-card>
  </page-layout>
</template>
  
<script>
import Vcity from '@/components/vcity/index'
import datas from '@/utils/data'
import srcPath from '@/assets/img/policyLibary/icon1.png'
import srcPathActive from '@/assets/img/policyLibary/icon1_active.png'
import PageLayout from "@/layouts/PageLayout";
import { getAllCityApi, getPolicyListByCityIdApi } from '@/services/socialSecurityFund'

/**
 * @description:  中英括号替换
 * @param {*} str
 * @return {*}
 */

function replaceStr (str) {
  let newNode = null;
  let allConvertNode = null;
  // 替换英文括号的时候因为正则表达式问题，英文前括号和后括号的前边都要加上\\
  if (str.includes("（") && str.includes("）")) {
    newNode = str.replaceAll("（", "(");
    allConvertNode = newNode.replaceAll("）", ")");
  } else if (str.includes("（") && !str.includes("）")) {
    allConvertNode = str.replaceAll("（", ")");
  } else if (!str.includes("（") && str.includes("）")) {
    allConvertNode = str.replaceAll("）", ")");
  } else {
    allConvertNode = str;
  }
  return allConvertNode;
}

// function objectFn (list, values) {
//   console.log('list', list)
//   var result = {};
//   for (var i = 0; i < list.length; i++) {
//     if (values) {
//       console.log(11)
//       result[list[i]] = values[i];
//     } else {
//       console.log(22, list[i][0])
//       result[i] = list[i];
//       console.log('result', result)
//     }
//   }
//   return result;
// }

export default {
  name: 'tab2',
  components: { Vcity, PageLayout },
  filters: {
    keyFilter (key) {
      switch (key) {
        case 'submitRuleShow':
          return '增减员规则'
        case 'modifier':
          return '政策更新时间'
        case 'dataSource':
          return '数据来源'
        case 'submitDateShow':
          return '当前月增减员截止日'
        case 'note':
          return '其他'
        case 'socialType':
          return '社保类型'
        case 'socialPaymentArea':
          return '社保缴纳区域'
        case 'socialPaymentMemo':
          return '备注'
        case 'websiteUrl':
          return '社保参保查询方式'
      }
    },
    symbolFilter (str) {
      return replaceStr(str)
    },

    toPercentFilter (num) {
      if (num == 0) {
        return 0;
      } else {
        num = Number(num * 100).toFixed(2);
        return num += "%";
      }
    },

    trackerFilter (val) {
      switch (val) {
        case 1:
          return '公司'
        case 2:
          return '个人'
        case 3:
          return '公司和个人'
      }
    },

    tableThFilter (key) {
      switch (key) {
        case 'xcbMap':
          return '新参保'
        case 'xbMap':
          return '续保'
        case 'jyMap':
          return '减员'
        case 'zkMap':
          return '制卡'
        case 'flMap':
          return '福利'
      }
    },

    tableTdkeyFilter (key) {
      switch (key) {
        case 'renewaCols':
          return '额外字段：'
        // case 'numFlag':
        //   return '社保账号:'
        case 'renewaFiles':
          return '所需材料：'
        case 'stopFiles':
          return '所需材料：'
        case 'stopCols':
          return '额外字段：'
        case 'newCols':
          return '额外字段：'
        case 'newFiles':
          return '所需材料：'
        case 'cardFiles':
          return '所需材料：'
        case 'cardHandle':
          return '社保卡办理方式：'
        case 'cardPeriod':
          return '下卡周期：'
        case 'welfareDesc':
          return '福利享受说明：'
        case 'numFlag':
          return '社保账号：'
        case 'renewalCols':
          return '额外字段：'
        case 'renewalFiles':
          return '所需材料：'
        case 'cardFile':
          return '所需材料：'
        case 'cardDesc':
          return '制卡说明：'
        case 'stopDesc':
          return '减员说明：'
        case 'keepDesc':
          return '续保说明：'
        case 'addDesc':
          return '新参保说明：'
      }
    },

    valueFilter (str) {
      return str.replace(/<p>|<br>|<a href="/g, "")
    },

    valueToBrFilter (str) {
      return String(str).replace(/\r\n/g, "<br>")
    },
  },
  created () {
    this.getData(221) // 默认上海 221
    this.getCityIvk()
  },
  data () {
    return {
      activeKey: 1,
      srcPath,
      srcPathActive,
      rightCntData: datas.rightCntData,
      rightCntColumns: datas.rightCntColumns,
      rightCntTableData: datas.rightCntTableData,
      cityData: [],
      pageData: []
    }
  },
  computed: {
    descDataObj () {
      let _arr = []
      this.pageData.forEach((item) => {
        _arr.push((item.memo))
      })

      if (_arr[this.activeKey - 1]) {
        let $obj = JSON.parse(_arr[this.activeKey - 1])
        $obj['dataSource'] = '社保通'
        _arr = $obj
      }

      return _arr
    },

    tabDatasArr () {
      return this.pageData
    },

    rightCntDataObj () {
      let _obj = {}
      let { socialType, socialPaymentArea, socialPaymentMemo, websiteUrl } = this.pageData[this.activeKey - 1]
      _obj['socialType'] = socialType
      _obj['socialPaymentArea'] = socialPaymentArea
      _obj['socialPaymentMemo'] = socialPaymentMemo
      _obj['websiteUrl'] = websiteUrl
      return _obj
    },

    rightCntTableDataArr () {
      return this.pageData[this.activeKey - 1].policyItemList
    },

    tableDataObj () {
      let $obj = {}
      let { flMap, jyMap, xbMap, xcbMap, zkMap } = this.pageData[this.activeKey - 1]
      $obj['xcbMap'] = xcbMap == '无' ? JSON.stringify(xcbMap) : xcbMap
      $obj['xbMap'] = xbMap == '无' ? JSON.stringify(xbMap) : xbMap
      $obj['jyMap'] = jyMap == '无' ? JSON.stringify(jyMap) : jyMap
      $obj['zkMap'] = zkMap == '无' ? JSON.stringify(zkMap) : zkMap
      $obj['flMap'] = flMap == '无' ? JSON.stringify(flMap) : flMap
      return $obj
    }
  },
  methods: {
    valueFilterFn (str) {
      return String(str).replace(/\r\n/g, "<br>")
    },

    getData (id) {
      let params = {
        cityId: id
      }
      getPolicyListByCityIdApi(params).then(res => {
        let { code, data, msg } = res.data
        if (code === 200) {
          this.pageData = data
        } else {
          this.$message.error(msg)
        }
      })
    },

    getCityIvk () {
      getAllCityApi().then(res => {
        let { code, data, msg } = res.data
        if (code === 200) {
          this.cityData = data
        } else if (code === 400) {
          this.$message.error(msg)
        }
      })
    },

    tabOnChangeFn (activeKey) {
      this.activeKey = activeKey
    },

    selectDepCity (data) {
      console.log('data', data)
      this.getData(data.id)
    },

    valueToObj (str) {
      // console.log('接受的原str', str)
      if (str.includes('{')) {
        // let keyArr = Object.keys(JSON.parse(str))  // 取key 存数组
        // keyArr.forEach((item, index) => {})



        // let _arr = []
        // for (let i in JSON.parse(str)) {
        //   _arr.push({ [i]: JSON.parse(str)[i] })
        //   _arr.forEach((item, index) => {
        //     for (let j in item) {
        //       if (j.includes('Desc')) {
        //         // console.log('含有desc', item, index)                                                
        //         _arr.splice(index)
        //       } else {
        //         // console.log('未包含', item)
        //       }
        //     }
        //   })
        // }
        // console.log('原数组', _arr)

        // let _arr = []
        // for (let i in JSON.parse(str)) {
        //   _arr.push({ [i]: JSON.parse(str)[i] })
        //   _arr.forEach((item, index) => {
        //     for (let key in item) {
        //       if (key.includes('Desc')) {
        //         _arr.splice(index)
        //       }
        //     }
        //   })
        // }
        // console.log('转换后的arr', _arr)
        // let _obj2 = objectFn(_arr)

        return JSON.parse(str)
      } else {
        return str
      }

    },

    htmlFilter (str) {
      return str.replace(/<[^>]+>/g, "")
    }
  }
}
</script>
  
<style scoped lang='less'>
.dsp_flex {
  display: flex;
  display: -webkit-flex;
}

@blue: #3370ff;
@white: #fff;

.f14 {
  font-size: 14px !important;
}

.active {
  background: @blue !important;
  color: @white !important;
  position: relative;
  &:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: -14px;
    width: 0;
    height: 0;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 16px solid @blue;
    transform: translate(0, -50%);
  }
  .txt_div {
    p {
      color: @white !important;
    }
  }
}

.top_div {
  align-items: center;
  padding-bottom: 20px;
}

.display_div {
  margin-top: 20px;
  /deep/ .ant-descriptions-row > th,
  /deep/ .ant-descriptions-row > td {
    padding: 4px;
  }
}
.tab_cnt {
  width: 200px;
  height: 100px;
  background: @white;
  border: 1px solid #ccc;
  .dsp_flex();
  align-items: center;
  position: relative;
  padding-left: 15px;
  & > p {
    margin: 0;
  }
  img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin: 0 10px;
  }
  .topLeft_img {
    height: 40px !important;
    width: 40px !important;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  .txt_div {
    text-align: left;
    p {
      margin-bottom: 0;
    }
    & > p:first-of-type {
      margin-bottom: 4px;
    }
    & > p:not(:last-of-type) {
      color: #262626;
    }
    & > p:last-of-type {
      font-size: 12px;
      color: #bfbfbf;
    }
  }
  .mini_label {
    padding: 0 6px;
    color: #588aff;
    background: #eaf0ff;
    font-size: 12px;
    position: absolute;
    top: 10px;
    right: 10px;
  }
}

.right_cnt {
  p {
    span {
      &:first-of-type {
        color: rgba(0, 0, 0, 0.85);
        font-size: 16px;
        margin-right: 10px;
      }
      &:last-of-type {
        color: rgba(0, 0, 0, 0.65);
        font-size: 12px;
      }
    }
  }
}

.vertical_table {
  margin-top: 20px;
  tr {
    th {
      width: 150px;
      height: 232px;
      line-height: 232px;
      text-align: center;
      color: rgba(0, 0, 0, 0.85);
      font-size: 14px;
      border: 1px solid rgba(239, 244, 254, 1);
    }
    td {
      padding-left: 20px;
      box-sizing: border-box;
      border-bottom: 1px solid rgba(239, 244, 254, 1);
      p {
        .dsp_flex();
        align-items: center;
        & > span:first-of-type {
          align-self: flex-start;
          color: rgba(0, 0, 0, 0.65);
          .f14();
        }
        & > span:last-of-type {
          color: rgba(0, 0, 0, 0.85) !important;
          .f14();
        }
      }
    }
  }
  & > tr:nth-child(odd) th {
    background: rgba(251, 251, 251, 1);
  }
}
.popover_btn_span {
  /deep/.ant-btn {
    text-align: left;
    border: 0 !important;
    span {
      display: block;
      width: 200px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis !important;
    }
  }
}
.hide {
  display: none;
}
.tab_cnt_wrapper {
  background: #f0f2f5;
  /deep/.ant-tabs-tab {
    padding: 8px 24px 0 0;
    margin: 0 0 4px 0;
  }
  /deep/.ant-tabs-ink-bar.ant-tabs-ink-bar-animated {
    display: none !important;
  }
  /deep/.ant-tabs-content.ant-tabs-content-animated.ant-tabs-left-content {
    background: #fff;
    padding: 20px;
  }
  /deep/.tab_cnt {
    border: 0;
  }
}

.policy_card {
  /deep/.ant-card-body {
    padding: 24px 0 0;
  }
  /deep/.top_div {
    padding: 0 24px 24px 24px;
  }
  /deep/.tab_cnt_wrapper {
    padding-top: 24px;
  }
  /deep/.ant-tabs {
    // margin: 0 0 4px 0;
    margin: 0;
  }
}
.vertical_table {
  width: 100%;
  tr:nth-of-type(1) {
    th {
      background: rgba(250, 173, 20, 0.2);
      color: rgba(250, 173, 20, 1);
    }
    td {
      background: rgba(250, 173, 20, 0.1);
    }
  }
  tr:nth-of-type(2) {
    th {
      background: rgba(51, 112, 255, 0.2);
      color: rgba(51, 112, 255, 1);
    }
    td {
      background: rgba(51, 112, 255, 0.1);
    }
  }
  tr:nth-of-type(3) {
    th {
      background: rgba(208, 2, 27, 0.2);
      color: rgba(208, 2, 27, 1);
    }
    td {
      background: rgba(208, 2, 27, 0.1);
    }
  }
  tr:nth-of-type(4) {
    th {
      background: rgba(126, 211, 33, 0.2);
      color: rgba(126, 211, 33, 1);
    }
    td {
      background: rgba(126, 211, 33, 0.1);
    }
  }
  tr:nth-of-type(5) {
    th {
      background: rgba(144, 19, 254, 0.2);
      color: rgba(144, 19, 254, 1);
    }
    td {
      background: rgba(144, 19, 254, 0.1);
    }
  }
}
.ellipsis {
  &:after {
    content: "...";
    font-size: 16px;
    font-weight: 600;
    color: #3b73f8;
    display: inline-block;
    white-space: nowrap;
  }
}
</style>